/*
 * 产品列表
 * @Author: ljb 
 * @Date: 2017-11-27 15:24:15 
 * @Last Modified by: ljb
 * @Last Modified time: 2018-01-30 15:09:19
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

</style>
<template>
<div class="v-admin-videos-index">

    <Table border :columns="columns" :loading="loading" :data="videos" @on-sort-change="sortable"></Table>

</div>
</template>

<script>

import Button from 'iview/src/components/button';
import Icon from 'iview/src/components/icon';

export default {
    name: 'videos-index',
    props: ['loading','videos','videoTypes'],
    data() {	
        return {
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '视频名称',
                    key: 'name',
                    align: 'center',
                    render: (h,{row}) => {
                        return <div> { row.name || '-' } </div>
                    }
                },
                {
                    title: '视频类别',
                    key: 'video_type_id',
                    align: 'center',
                    render: (h,{row}) => {
                        return <div> { this.videoTypes[row.video_type_id] || '-' } </div>
                    }
                },
                {
                    title: '优先级',
                    key: 'sort',
                    align: 'center',
                    sortable: 'custom',
                    render: (h,{row}) => {
                        return <div> { row.sort || '-' } </div>
                    }
                },
                {
                    title: '封面图',
                    key: 'preview_img',
                    align: 'center',
                    render: (h,{row}) => {
                        return <div>
                            {   
                                row.preview_img
                                ? <img src={ row.preview_img } alt="无" width="50%"/>
                                : '无' 
                            }
                        </div>
                    }
                },
                {
                    title: '创建时间',
                    key: 'created_at',
                    width: 200,                 
                    align: 'center',
                    sortable: 'custom',
                    render: (h,{row}) => {
                        return <div> { !row.created_at ? '-': row.created_at  } </div>
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    width: 200,
                    render: (h, {row}) => {
                        return (
                            <div>
                                <Button size="small" style={{ marginRight: '5px' }} on-click={() => {this.$emit('edit',row.id)}} type="primary">修改信息</Button>
                                <Button size="small" on-click={() => {this.$emit('delete',row.id)}} type="error">删除视频</Button>
                            </div>)
                    }
                }
            ]
        }
    },
    methods: {
        
        /**
         * 排序的回调
         * @param  {Object} param {对应列的属性对象,里面包含了column列属性，key值，order排序字段}
         * @return {undefined}
         */
        sortable( param ){

            const search_param = {

                order_by : param.key,

                sort : param.order === 'normal' ? '' : param.order

            }
            
            this.$emit('sort',search_param);

        }

    }
}
</script>